<template>
  <div>
    <div class="newsCenter" >
      <Header @modify="modify" @naviBack="naviBack" :title="title" :flag="flag" :flag2="flag2"></Header>
      <div class="newsContent">
        <div class="userInfo">
          <div class="userAvater">
            <img :src=userInfo.face alt="">
            <p>{{userInfo.username}}</p>
          </div>
          <div class="userDetail">
            <div class="score">
              <router-link  :to="{name:'userScore'}">
                <a >
                  <p class="p1">{{userInfo.total_score}}分</p>
                  <p class="p2">本月积分</p>
                </a>
              </router-link>
            </div>
            <div class="rank">
              <router-link  :to="{name:'assessment'}">
              <a >
                <p class="p1">{{userInfo.rank}}名</p>
                <p class="p2">本月排名</p>
              </a>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="newsList">
        <router-link :to="{name:item.router}" v-for="(item,index) in newsListItem" :key="index">
            <a class="newsListItem flexs" >
                <span class="iconfont  iconLeft" :class=item.icon>

                </span>
                <p class="flex1">
                  {{item.name}}
                  <em v-if="index==0&&msgTips>0">{{msgTips}}</em>
                </p>
                <span class="iconfont icon-right1 iconRight"></span>
            </a>
        </router-link>
      </div>
    </div>
    <a >
      <div class="loginOut" @click.stop="loginOut">
        退出登录
      </div>
    </a>
  </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  import Header from '../../components/userheader.vue'
export default({
  data (){
      return {
        title:'个人中心',
        flag:true,
        flag2:false,
        userInfo:{},
        msgTips:0,
        newsListItem:[
          {
              name:'消息提醒',
              icon:'icon-tongzhi2',
              router:'newsNotice'
          },
          {
            name:'意见反馈',
            icon:'icon-email2',
            router:'advice'
          },
          {
            name:'关于我们',
            icon:'icon-svgabout',
            router:'about'
          }
        ]
      }
  },
  computed:{
    ...mapState({
      loginState:state => state.app.loginState,
      desgin:state =>state.app.desgin
    })
  },
  methods:{
    ...mapMutations(['changeLoginStatus','saveUid']),
    naviBack(){
      this.$router.go(-1)
    },

    modify (){
      this.$router.push({
        name:'editorUser'
      })
    },
    loginOut(){
      this.changeLoginStatus({
        isExit:0
      })
      this.saveUid({
          uid:'',
          token:''
      });
      localStorage.setItem('uid','')
      localStorage.setItem('token','')
      localStorage.setItem('userAccount','')
      this.$router.push({
        name:'loginPage'
      })
    },
    initData(){
        this.axios.get('/home/User/getUserIndex?'+`${this.baseUrl}`,{
            params:{
                uid:this.uid||localStorage.getItem('uid')
            }
        }).then((res)=>{
            if(res.data.code==1){
//                console.log(res.data.data)
                this.userInfo =res.data.data.user
                this.msgTips =res.data.data.msg_num
            }
        }).catch((res)=>{
            console.log(res.error)
        })
    }

  },
  components:{
    Header
  },
  mounted(){
    this.initData()
//    console.log(this.loginState.uid)
  }
})
</script>

<style scoped>
  body{
    position: relative;
  }
  body,html{
    max-width: 750px;
    margin: 0 auto;
  }
  .newsCenter{
    background: #f6f6f6;
  }
  .flexs{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
  }
  .flex1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }

  .newsContent{
    height: 5.9rem;
    background-image: url(../../../static/images/newsCenter2_02.png);
    background-position: 0 0 ;
    background-repeat: no-repeat;
    background-size: 7.5rem 2.9rem;
    margin-top: -0.8rem;
    overflow: hidden;
    background-color: white;
  }
  .userInfo{
    height: 4.37rem;
    text-align: center;
    margin-top: 1.56rem;
  }
  .userAvater{
    height: 2.9rem;
    text-align: center;
  }
  .userAvater img{
    width: 1.74rem;
    height: 1.74rem;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
  }
  .userAvater p{
    text-align: center;
    font-size: 0.3rem;
    color: #000;
    margin-top: 0.3rem;
  }
  .userDetail>div{
    float: left;
    display: inline-block;
    width: 50%;
    height: 1.3rem;
    text-align: center;
  }
  .userDetail>div .p1{
    font-size:0.3rem;
    color:#e83329;
    text-align: center;
  }
  .userDetail>div .p2{
    font-size:0.26rem;
    color:#888787;
    text-align: center;
    margin-top: 0.15rem;
  }
  .newsList{
    margin-top: 0.26rem;
  }
  .newsListItem {
    width: 100%;
    height: 1rem;
    border-bottom: 1px solid #e6e6e6;
    background: white;
    line-height: 1rem;
    padding: 0 0.32rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .newsListItem .iconLeft{
    color:#fe6e67 ;
    display: inline-block;
    width: 0.6rem;
    font-size:0.36rem

  }
  .newsListItem p{
    text-align: left ;
    font-size: 0.28rem;
    position: relative;
  }
  .newsListItem p em{
    font-size: 10px;
    color: white;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top:50%;
    margin-top: -10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background: red;
    line-height: 20px;
    text-align: center;
    font-style: normal;
  }
  .iconRight{
    width: 0.3rem;
    text-align: right;
    color:#9e9e9e ;
    font-size:0.36rem
  }
  .loginOut{
    position: fixed;
    max-width: 750px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0.8rem;
    background: #e83329;
    line-height: 0.8rem;
    font-size: 0.32rem;
    color: white;
    text-align: center;
    margin: 0 auto;
  }
</style>
